
<template>
	<view class="columnbox content wdh-100">
		<u-navbar title="个人中心" @rightClick="rightClick" :autoBack="true" :placeholder="true">
			<view class="appoint_left display  " slot="left">
				<uni-icons type="left" size="18" color="#000"></uni-icons>
			</view>
			<view class="apponit_center display " slot="center">
				<span class="title_txt fontSize font_comm">选择洗车券</span>
			</view>
		</u-navbar>
		<view class="contents1 display  width-100 M-T24" v-for="(item,index) in list" :key='index'>
			<view class="fn_one_left display  all_item" @click="changeIndex(item)" v-if="item.available!=0">
				<view :class="{fn_circles:!item.mmflag,fn_circles1:item.mmflag,display:true,all_item:true}">
					<view class="fn_sjdjdj" v-if="item.mmflag">
						
					</view>
				</view>
			</view>
			<view class="columnbox cou-one-box-content M-L24"  v-if="item.available!=0">
				<view class="columnbox cou-one-box" :style="{'background-image': 'url(' +item.bgUrl+')','width':'630rpx'}">
					<view class="rowbox wdh-100 als spb">
						<view class="rowbox">
							<image src="/static/img/logo.jpeg" mode="aspectFill" class="cou-img"></image>
							<view class="columnbox als cou-name-box">
								<view class="cou-name">{{item.name}}</view>
								<view class="origin">{{item.origin}}</view>
							</view>
						</view>
						<view class="coupon_price " ><text>￥</text>{{item.price}}</view>
					</view>
					<view class="wdh-100 code">洗车券码：{{item.code}}</view>
					<view class="wdh-100 validity">有效期至：{{item.validity.split(' ')[0]}}</view>
					
				</view>
				<view class="wdh-100 rowbox spb coupon-desc" style="width: 630rpx;" @click="changeFlag(item)">
					<view style="width: 550rpx;" :class="{'textovflow':!item.flag}">
						使用说明：{{item.illustrate}}
						<view class="wdh-100 s-title" v-if="item.flag">使用规则:</view>
						
						<!-- <text style="margin-top: 12rpx;" class="wdh-100 s-title" v-if="item.dayAvailableType==0">可用日期:全天可用</text> -->
						<!-- <text style="margin-top: 12rpx;" class="wdh-100 s-title" v-if="item.dayAvailableType==1">可用日期:2024-12</text> -->
						<text style="margin-top: 12rpx;" class="wdh-100 s-title" v-if="item.validityType==0 && item.flag">可用日期: {{item.validity}}</text>
						<text style="margin-top: 12rpx;" class="wdh-100 s-title" v-if="item.validityType==1 && item.flag">可用日期: {{item.validityStartDate}}至{{item.validityEndDate}}</text>
						<view class="wdh-100 s-title" v-if="item.notAvailableType==0 && item.flag">不可用日期:  所有日期均可用</view>
						<view class="wdh-100 s-title" v-if="item.notAvailableType==1 && item.flag">不可用日期:  {{item.notAvailableStartDate}} - {{item.notAvailableEndDate}}</view>
						<view class="wdh-100 s-title" v-if="item.dayAvailableType==0 && item.flag">可用时段:  全天可用</view>
						<view class="wdh-100 s-title" v-if="item.dayAvailableType==1 && item.flag">可用时段:  {{item.dayAvailableStartTime}} - {{item.dayAvailableEndTime}}</view>
					</view>
					<u-icon v-if="!item.flag" name="arrow-down" size="28rpx"></u-icon>
					<u-icon v-else name="arrow-up" size="28rpx"></u-icon>
				</view>
			</view>
		</view>
		<!--不能使用 -->
		<view class="display displaycenter_aliem width-100 all_item ">
			<span class="fontSize font_comm dns_ones" ></span>
			<span class="fontSize font_comm fn_xiche">不可用洗车券</span>
			<span class="fontSize font_comm dns_ones"></span>
		</view>
		<view class="contents1 display  width-100 M-T24 all_item" v-for="(item,index) in list" :key='index'>
			
			<view class="columnbox cou-one-box-content  M-L24"  v-if="item.available==0">
				<view class="columnbox cou-one-box" :style="{'background-image': 'url(' +item.bgUrl+')','width':'630rpx'}">
					<view class="rowbox wdh-100 als spb">
						<view class="rowbox">
							<image src="/static/img/logo.jpeg" mode="aspectFill" class="cou-img"></image>
							<view class="columnbox als cou-name-box">
								<view class="cou-name">{{item.name}}</view>
								<view class="origin">{{item.origin}}</view>
							</view>
						</view>
						<view class="coupon_price" ><text>￥</text>{{item.price}}</view>
					</view>
					<view class="wdh-100 code">洗车券码：{{item.code}}</view>
					<view class="wdh-100 validity">有效期至：{{item.validity.split(' ')[0]}}</view>
					
				</view>
				<view class="wdh-100 rowbox spb coupon-desc" style="width: 630rpx;" @click="changeFlag(item)">
					<view style="width: 550rpx;" :class="{'textovflow':!item.flag}">
						使用说明：{{item.illustrate}}
						<view class="wdh-100 s-title" v-if="item.flag">使用规则:</view>
						
						<!-- <text style="margin-top: 12rpx;" class="wdh-100 s-title" v-if="item.dayAvailableType==0">可用日期:全天可用</text> -->
						<!-- <text style="margin-top: 12rpx;" class="wdh-100 s-title" v-if="item.dayAvailableType==1">可用日期:2024-12</text> -->
						<text style="margin-top: 12rpx;" class="wdh-100 s-title" v-if="item.validityType==0 && item.flag">可用日期: {{item.validity}}</text>
						<text style="margin-top: 12rpx;" class="wdh-100 s-title" v-if="item.validityType==1 && item.flag">可用日期: {{item.validityStartDate}}至{{item.validityEndDate}}</text>
						<view class="wdh-100 s-title" v-if="item.notAvailableType==0 && item.flag">不可用日期:  所有日期均可用</view>
						<view class="wdh-100 s-title" v-if="item.notAvailableType==1 && item.flag">不可用日期:  {{item.notAvailableStartDate}} - {{item.notAvailableEndDate}}</view>
						<view class="wdh-100 s-title" v-if="item.dayAvailableType==0 && item.flag">可用时段:  全天可用</view>
						<view class="wdh-100 s-title" v-if="item.dayAvailableType==1 && item.flag">可用时段:  {{item.dayAvailableStartTime}} - {{item.dayAvailableEndTime}}</view>
					</view>
					<u-icon v-if="!item.flag" name="arrow-down" size="28rpx"></u-icon>
					<u-icon v-else name="arrow-up" size="28rpx"></u-icon>
				</view>
			</view>
		</view>
		<view class="wode display  width-100" style="height: 100rpx;">
			
		</view>
		<view class="display all_item width-100 fn_fox1">
			<button class="fontSize font_comm budns1 display all_item" @click="submit">确认</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				selectIndex:0,
				curtab: 0,
				list: [],
				pageNum: 1,
				total: 0,
				refreshflag: false,
				submitflag: false,
				number:0,//计算选了几个洗车券
				idArr:[]
				
			};
		},
		onLoad(options) {
			this.getList();
		},
		onReachBottom(){
			console.log('触底加载')
			if(this.list.length == this.total){
				return false
			}
			this.pageNum++
			this.getList();
			
		},
		onShow() {
			if (this.refreshflag) {
				this.refreshflag = false
				this.pageNum = 1
				this.list = []
				this.getList()
			}
		},
		methods: {
			changeFlag(items){
				console.log(items)
				for(let i=0;i<this.list.length;i++){
					if(items.id == this.list[i].id){
						this.list[i].flag = !this.list[i].flag;
						break;
					}
				}
			},
			submit(){
				let pages = getCurrentPages(); // 获取当前页面栈的实例，以数组形式按栈的顺序给出，第一个元素为首页，最后一个元素为当前页面。
				let nowPage = pages[pages.length - 1]; //当前页页面实例
				let prevPage = pages[pages.length - 2]; //上一页页面实例
				console.log(prevPage)
				let object = {
					ids:this.idArr.join(',')
				};
				
				uni.navigateBack({
				    delta:1, // 可以不傳delta值，默認為1
					success:()=>{
						prevPage.$vm.otherFun(object)// 給上一頁綁定方法otherFun,傳參object
					}
				})

			},
			changeIndex(item){
				console.log(item)
				if(this.number >=2&&!item.mmflag){
					this.$modal.msg('最多可选择2张洗车券');
					return false;
				}
				for(let i=0;i<this.list.length;i++){
					if(this.list[i].id==item.id){
						this.list[i].mmflag = !this.list[i].mmflag;
						if(this.list[i].mmflag){
							this.number++
							this.idArr.push(this.list[i].id);
						}else{
							this.number--
							this.idArr.splice(i,1);
						}
					}
				}
				console.log(this.idArr)
				
			},
			getList() {
				let data = {}
				let url = ''
				if (this.curtab == 0) {
					data = {
						useStatus: this.curtab,
						pageSize: 10,
						pageNum: this.pageNum
					}
					url = '/xcx/userCoupons/list/use'

				}
				this.$req.get(url, data).then(res => {
					console.log(res)
					if (res.data.code == 200) {
						res.data.rows.forEach(resp => {
							resp.bgUrl = resp.bgUrl
							resp.flag = false
							resp.mmflag = false//控制是否选中洗车券  false未园中  true选中
						})
						this.list = this.list.concat(res.data.rows)
						// console.log(this.list)
						this.total = res.data.total
					} else{
						this.$modal.msg(res.data.msg)
					}
					})
					}
		}
	}
</script>

<style lang="scss" scoped>
	.fn_xiche{
		font-size: 32rpx;
		color: #666666;
		font-weight: bold;
		
		
	}
	.dns_ones{
		width: 200rpx;
		height: 0;
		background: #666;
	}
	.content {
		font-family: PingFang SC;
		background: #F4F5FA;
		min-height: 100vh;
		justify-content: flex-start;
		position: relative;
		padding-bottom: 70rpx;
	}

	.c-box {
		border-radius: 20rpx;
		background: #fff;
		margin: 10rpx 0;
		width: 710rpx;
		overflow: hidden;
		padding-bottom: 20rpx;
	}


	.c-info {
		width: 100%;
	}
	.fn_circles1{
		width: 36rpx;
		height: 36rpx;
		border-radius: 50%;
		border: 2rpx solid #126BC9;
	}
	.fn_sjdjdj{
		width: 24rpx;
		height: 24rpx;
		background: #126BC9;
		border-radius: 50%;
	}
	.c-detail {
		box-shadow: 0px 2px 3px 0px rgba(206, 206, 206, 0.4);
		padding: 0 20rpx;
		border-radius: 20rpx;
		padding-right: 0;
		margin-bottom: 20rpx;

		.c-price {
			font-size: 32rpx;
			color: #fff;
			font-weight: bold;
			background: #1E72CA;
			height: 170rpx;
			width: 150rpx;
		}

		.c-desc {
			width: calc(100% - 190rpx);
		}

		.c-name {
			font-size: 32rpx;
			color: rgba(56, 148, 254, 1);
		}
	}

	.c-intro {
		margin-top: 10rpx;
		color: rgba(154, 154, 154, 1);
		font-size: 24rpx;
	}

	.detailbox {
		padding: 10rpx 20rpx;
		color: rgba(154, 154, 154, 1);
		font-size: 24rpx;
	}

	.bottom-box {
		position: fixed;
		bottom: 0;
		left: 0;
		background: #fff;
		padding: 20rpx 32rpx;
		padding-bottom: 40rpx;
		z-index: 9;
		border-top: #f2f5f5 solid 1px;
		width: 100%;
		justify-content: space-between;
	}

	.pay-btn {
		font-size: 28rpx;
		color: #fff;
		background: #1E72CA;
		border-radius: 10rpx;
		width: 100%;
		height: 90rpx;
	}

	.tab-list {
		padding: 20rpx 20rpx;
		align-items: flex-start;

		.one-tab {
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 24rpx;
			color: #212121;
			width: 100rpx;
			margin-right: 50rpx;
			// background: #fff;
			// font-size: 28rpx;
			// width: 120rpx;
			// height: 70rpx;
			// border-radius: 100rpx;
			// box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.07);
		}

		.tab-line {
			width: 36rpx;
			height: 6rpx;
			background: #126BC9;
			border-radius: 3rpx;
		}

		.sel-tab {
			font-family: PingFang SC, PingFang SC;
			font-weight: 800;
			font-size: 28rpx;
			color: #212121;
		}
	}

	.btn-box {
		justify-content: flex-end;
		font-size: 28rpx;

		.ewm-btn,
		.zz-btn,
		.use-btn {
			line-height: 40rpx;
			border: #babcbc solid 1px;
			padding: 10rpx 20rpx;
			border-radius: 10rpx;
			color: #5a5a5b;
			margin-left: 20rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 800;
			font-size: 24rpx;
		}

		.zz-btn {
			border: #1E72CA solid 1px;
			color: #1E72CA;
		}

		.use-btn {
			background: #126BC9;
			color: #fff;
			border: #1E72CA solid 1px;

		}
	}

	.notice-box {
		width: 710rpx;
		margin-top: 32rpx;
		background: #fff;
		border-radius: 24rpx;
		padding: 24rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #72778A;

		.notice_title {
			font-family: PingFang SC, PingFang SC;
			font-weight: 800;
			font-size: 28rpx;
			color: #000000;
			margin-bottom: 12rpx;
		}
	}

	.cou-one-box-content {
		background: #fff;
		margin-bottom: 20rpx;
		border-radius: 20rpx;
	}

	.coupon-desc {
		font-size: 24rpx;
		padding: 20rpx 20rpx;
		box-sizing: border-box;
		color: #6c6d6d;
	}

	.cou-one-box {
		border-radius: 20rpx;
		padding: 20rpx 20rpx;
		// background: linear-gradient(to right, #ffae4f, #ff9022);
		background-repeat: no-repeat;
		background-size: 100% auto;
		width: 710rpx;
		color: #fff;
		font-size: 28rpx;
		position: relative;

		.cou-img {
			width: 90rpx;
			height: 90rpx;
			border-radius: 100rpx;
		}

		.cou-name-box {
			width: 400rpx;
			margin-left: 20rpx;
		}

		.cou-name {
			font-size: 32rpx;
			font-weight: bold;
		}

		.origin,
		.code,
		.validity {
			font-size: 24rpx;
			opacity: 0.9;
			margin-top: 10rpx;
		}

		.code {
			margin-top: 70rpx;
		}

		.use-btn {
			background: #126BC9;
			color: #fff;
			border: #126BC9 solid 1px;
			font-family: PingFang SC, PingFang SC;
			font-weight: 800;
			font-size: 24rrpx;
			padding: 4rpx 20rpx;
			border-radius: 10rpx;
		}

		.zs-btn {
			background: #fff;
			margin-right: 20rpx;
			color: #1E72CA;
		}
	}

	.coupon_price {
		font-family: PingFang SC, PingFang SC;
		font-weight: 800;
		font-size: 40rpx;
		transform: translateX(-30rpx);
		color: #FFFFFF;
		text {
			font-size: 24rpx;
			
		}
	}

	.buy_btn {
		width: 270rpx;
		height: 82rpx;
		background: rgba(23, 105, 143, 0.1);
		border-radius: 24rpx;
		border: 2rpx solid #17698F;
		font-family: PingFang SC, PingFang SC;
		font-weight: 800;
		font-size: 24rpx;
		color: #126BC9;
		margin-top: 70rpx;
	}

	.gq_coupon {
		font-family: PingFang SC, PingFang SC;
		font-weight: 800;
		font-size: 24rpx;
		color: #126BC9;
		position: absolute;
		bottom: 40rpx;
	}
	.textovflow{
		height: auto;
	}
	.fn_one_left{
		width: 70rpx;
	}
	.fn_circles{
		width: 36rpx;
		height: 36rpx;
		border-radius: 50%;
		border: 2rpx solid #999999;
	}
	.fn_fox1{
		position: fixed;
		bottom: 0;
		padding: 40rpx;
	}
	.budns1{
		width: 690rpx;
		height: 84rpx;
		background: #126BC9;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		font-weight: 600;
		font-size: 28rpx;
		color: #FFFFFF;
	}
</style>